<template>
	<view>
		<view class="phone-top f26 c999">你的账号目前绑定手机号是{{userInfo.phone}}，请输入你希望更换的手机号。</view>
    <view class="box">
			<view class="box-item">
				<text class="title f26 c999">当前手机号</text>
				<text class="content">{{userInfo.phone}}</text>
			</view>
    	<view class="box-item">
    		<text class="title f26">更改手机号</text>
    		<input type="text" v-model="phoneIn" placeholder="请输入新手机号码" placeholder-class="plStyle"/>
    	</view>
    </view>
		<view class="saveBtn" @tap="next">下一步</view>
	</view>
</template>

<script>
	import {
		    mapState
	    } from 'vuex'; 
	export default {
		data() {
			return {
				phoneIn:""
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			
		},
		methods: {
			next(){
				let reg=/^1[0-9]{10}$/
				if(!reg.test(this.phoneIn)){
					 this.$u.msg('请正确输入手机号')
					return;
				}
				this.$http.get(`/api/common/sms/${this.phoneIn}`).then(res => {
					 if (res.data.code == 200) {
					 console.log(res.data.data)
					 this.$u.to('getCode?phone='+this.phoneIn+'&oldPhone='+this.userInfo.phone)
					 } else {
						 this.$u.msg(res.data.msg)
					 }
				})
			}
		}
	}
</script>

<style lang="less">
page{background: #F6F7F8;}
.phone-top{padding: 30rpx;line-height: 40rpx;}
.box{
	.box-item{
		background: #FFFFFF;padding: 30rpx;border-bottom: 1px solid #F6F7F8;font-size: 30rpx;
		display: flex;align-items: center;
		.title{width: 200rpx;}
		.content{color: #666666;}
	}
}
.saveBtn{margin: 80rpx 30rpx 0 30rpx;}
</style>
